<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>

    <div class="layui-container">
        <button class="layui-btn add">添加用户</button>

        <table class="layui-table" id="tableEle" lay-filter="tableEle"></table>
    </div>
    
    <script src="../lib/layui/layui.all.js"></script>
    <script src="api.js"></script>
    <script>
        /*
            用户表格
            用户增删改
            $.ajax  layui form/table/layer

        url: 
            添加 -> 添加的参数
            删除 -> xxx/del GET  ?id=xxx
            修改 -> xxx/updateUserInfo  POST  x-ww-fo 参数比添加少：username/password  多了一个userId
            列表 -> http://bufantec.com/api/test/user/list GET  start/limit
            检查用户名是否存在 -> xxx/checkUserName  POST x-ww-fo  username=xxx
        

        点击删除 一定 一定 一定 要有弹窗
        */

        var table = layui.table,
            form = layui.form,
            layer = layui.layer,
            $ = layui.$;
        // 渲染数据表格
        table.render({
            elem: '#tableEle',
            id: 'userTable',
            url: api.user.list,
            request: {
                // 请求的参数  page/limit重命名
                pageName: 'start'
            },
            parseData(res) {
                var list = res.data.list;
                for (var i = 0; i < list.length; i++) {
                    list[i].sex = list[i].sex == 1 ? '女' : '男';
                    list[i].tel = list[i].tel || '暂无';
                    list[i].address = list[i].address || '暂无';
                }
                return {
                    code: 0,
                    msg: '提示',
                    count: res.data.totalRow,
                    data: res.data.list
                }
            },
            cols: [[
                { title: "序号", type: "numbers" },
                { title: "昵称", field: "name" },
                { title: "年龄", field: "age" },
                { title: "性别", field: "sex" },
                { title: "电话", field: "tel" },
                { title: "住址", field: "address" },
                { title: "学校", field: "school" },
                { toolbar: `<div>
                    <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="alter">修改</button>
                    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</button>
                    </div>` }
            ]],
            page: {
                limit: 5,
                limits: [5, 10, 15]
            },
            
        });
        // 添加用户和修改用户表单的唯一标识符
        var index = null;
        // 标识是否是修改
        var isAlter = null;
        $('.add').click(function () {
            var obj = {
                username: '大洋洲',
                password: 'qwewer',
                name: '锤子',
                age: 21,
                sex: '1',
                tel: 4545121545,
                address: '大洋彼岸',
                school: '彼岸学院'
            }
            index = layer.open({
                type: 1,
                content: `
                <form class="layui-form" lay-filter="formEle">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" value="${obj.username}" autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="password" value="${obj.password}" autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">昵称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" value="${obj.name}" autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">年龄</label>
                        <div class="layui-input-block">
                            <input type="text" name="age" value="${obj.age}" autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <input type="radio" name="sex" value="0"title="男" ${obj.sex == '0' ? 'checked' : null}>
                            <input type="radio" name="sex" value="1"title="女" ${obj.sex == '1' ? 'checked' : null}>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">电话</label>
                        <div class="layui-input-block">
                            <input type="text" name="tel" value="${obj.tel}" autocomplete="off" class="layui-input" lay-verify="number">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">地址</label>
                        <div class="layui-input-block">
                            <input type="text" name="address" value="${obj.address}" autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">学校</label>
                        <div class="layui-input-block">
                            <input type="text" name="school" value="${obj.school}" autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                        </div>
                    </div>
                </form>
                `,
            })
            // 渲染表单
            form.render();
        })
        form.on('submit(*)', function (data) {
            // data.field 所有表单值 { name: value }
            // 如果是修改
            if (isAlter) {
                data.field.userId = isAlter;
                isAlter = null;
                $.ajax({
                    url: api.user.edit,
                    type: 'POST',
                    contentType: 'application/x-www-form-urlencoded',
                    data: data.field,
                    success(res) {
                        if (res.code == 'success') {
                            // 关闭弹出层
                            layer.close(index);
                            // 弹出提示
                            layer.msg('修改成功', { icon: 1 })
                            // 刷新表格
                            table.reload('userTable');
                        }
                    }
                })
            } else { // 如果是添加
                $.ajax({
                    url: api.user.check,
                    type: 'POST',
                    contentType: 'application/x-www-form-urlencoded',
                    data: {
                        username: data.field.username
                    },
                    success(res) {
                        if (res.code == 'success') {
                            $.ajax({
                                url: api.user.add,
                                type: 'POST',
                                contentType: 'application/x-www-form-urlencoded',
                                data: data.field,
                                success(res) {
                                    if (res.code == 'success') {
                                        // 关闭弹窗
                                        layer.close(index);
                                        // 给出提示
                                        layer.msg('添加成功', { icon: 1 });
                                        // 重载表格
                                        table.reload('userTable');
                                    } else {
                                        layer.msg('数据不规范', { icon: 2 });
                                    }        
                                } 
                            })
                                      
                        } else {
                            layer.msg('用户名已存在', { icon: 2 });
                        }
                    }
                })
            }
            // 阻止表单跳转
            return false
        })

        table.on('tool(tableEle)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            // 点击修改
            if (layEvent == 'alter') {
                // 当前行用户的userId
                isAlter = data.userId;
                data.sex = data.sex == '女'? '1' : '0';
                index = layer.open({
                    type: 1,
                    content: `
                    <form class="layui-form" lay-filter="formEle">
                        <div class="layui-form-item">
                            <label class="layui-form-label">昵称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" value="${data.name}" autocomplete="off" class="layui-input" lay-verify="required">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">年龄</label>
                            <div class="layui-input-block">
                                <input type="text" name="age" value="${data.age}" autocomplete="off" class="layui-input" lay-verify="required">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-block">
                                <input type="radio" name="sex" value="0"title="男" ${data.sex == '0' ? 'checked' : null}>
                                <input type="radio" name="sex" value="1"title="女" ${data.sex == '1' ? 'checked' : null}>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">电话</label>
                            <div class="layui-input-block">
                                <input type="text" name="tel" value="${data.tel}" autocomplete="off" class="layui-input" lay-verify="number">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">地址</label>
                            <div class="layui-input-block">
                                <input type="text" name="address" value="${data.address}" autocomplete="off" class="layui-input" lay-verify="required">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">学校</label>
                            <div class="layui-input-block">
                                <input type="text" name="school" value="${data.school}" autocomplete="off" class="layui-input" lay-verify="required">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                            </div>
                        </div>
                    </form>
                    `,
                })
                form.render();
            } else if (layEvent == 'del') { // 点击删除
                layer.confirm('真的要删除么？', {icon: 7, title:'警告'}, function () {
                    $.ajax({
                        url: api.user.del,
                        type: 'GET',
                        data: {
                            id: data.userId
                        },
                        success(res) {
                            if (res.code == 'success') {
                                // 给出提示
                                layer.msg('已删除', { icon: 1 });
                                // 刷新表格
                                table.reload('userTable');
                            }
                        }
                    })
                })
            }
        })
    </script>
</body>
</html>